import React, { PropTypes, Component } from 'react'

import Subheader from 'material-ui/Subheader';
import Chip from 'material-ui/Chip';
import TextField from 'material-ui/TextField';

import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import FloatingActionButton from 'material-ui/FloatingActionButton';

import {List, ListItem} from 'material-ui/List';

const styles={
  slider:{
    marginTop:8,
    marginBottom:0
  },
  paddingInput:{
    width:120
  },
  subheader:{
    background:'#3899ec',
    cursor:'move'
  },
  boldIcon:{
    color:'#000',
    fontWeight:'bold'
  },
  fontFamily:{
    fontYahei:'Microsoft Yahei',
    fontSimSun:'SimSun',
    fontSimHei:'SimHei'
  }
}

class WidgetMenuFontHot extends Component {
 constructor(props, context) {
    super(props, context)
    this.state = {

    };
  }


  handElementStyles(e,attribute,value){
    let {widget}=this.props
    let styles=widget.styles
    let componentId=widget.componentId
    let positionId=widget.positionId
    let newStyles=false
    switch (attribute){
      case 'fontFamily':{
          if(value!=='')
           newStyles= Object.assign({},styles,{fontFamily:value})
      }

    }
     
    newStyles?this.props.widgetSetElementStyle(componentId,positionId,newStyles):null
  }

  render() {
    let { widget}=this.props
    console.log(widget)
    return (
       <div className="menu-widget menu-widget-font">
         <List> 
          <ListItem primaryText="标题样式" 
                    style={{height:40,color:'rgb(0, 188,212)'}}
                    initiallyOpen="true"
                     nestedItems={[
                     <div className="menu-widget-group">
                        <div className="menu-widget-column header">
                          <span className="label" >字体大小</span>
                           <span>
                           <input type="text" className="ipt-fontsize"
                                  value={widget.styles.fontSize||12}  />
                          </span>
                        </div>
                        
                     </div> ,
                     <div className="menu-widget-group">
                        <div className="menu-widget-column header">字体选择</div>
                        <div className="menu-widget-column ">
                            <SelectField value={widget.styles.fontFamily||'Microsoft Yahei'} 
                                         autoWidth="true" 
                                         style={{width:'200px'}}
                                         onChange={(e,index,value)=>{this.handElementStyles(e,'fontFamily',value)}} >
                                  
                                   <MenuItem value="Microsoft Yahei" 
                                             primaryText="微软雅黑"
                                             style={{fontFamily:styles.fontFamily.fontYahei}} 
                                             />
                                  <MenuItem value="SimSun" 
                                            primaryText="宋体" 
                                             style={{fontFamily:styles.fontFamily.fontSimSun}} 
                                            />
                                  <MenuItem value="SimHei" 
                                            primaryText="黑体" 
                                             style={{fontFamily:styles.fontFamily.fontSimHei}} 
                                            />
                            </SelectField>
                        </div>
                        
                     </div> ,
                     <div className="menu-widget-group">
                        <div className="menu-widget-header">字体样式</div>
                        <div className="menu-widget-column font-styles">
                           <span className="font-weight">B</span>
                         
                          <span className="font-under">U</span>
                          <span className="font-italic">I</span>
                          <span className="font-color">C</span>
                      </div>
                     </div>,
                     <div className="menu-widget-group">
                        <div className="menu-widget-header">布局相关</div>
                        
                     </div>,

                     <div className="menu-widget-group">
                        <div className="menu-widget-header">背景</div>
                        
                     </div> 
                     ]}

           />
           <ListItem primaryText="文字样式" 
                    style={{height:40,color:'rgb(0, 188, 212)'}}
                     nestedItems={[
                     <div className="menu-widget-group">
                        <div className="menu-widget-header">字体大小</div>
                        <div>
                            <input type="text" className="ipt-font-size"
                                    value={widget.styles.fontSize||12}
                              />
                        </div>
                     </div> ,
                     <div className="menu-widget-group">
                        <div className="menu-widget-header">字体样式</div>
                        <div className=" font-styles">
                           <span className="font-weight">B</span>
                         
                          <span className="font-under">U</span>
                          <span className="font-italic">I</span>
                          <span className="font-color">C</span>
                      </div>
                     </div>,
                     <div className="menu-widget-group">
                        <div className="menu-widget-header">布局相关</div>
                        
                     </div>,

                     <div className="menu-widget-group">
                        <div className="menu-widget-header">头条背景</div>
                        
                     </div> 
                     ]}

           />
          </List>
                  
              </div>
        
    )
  }
}

WidgetMenuFontHot.propTypes = {
  widgetSetElementStyle:PropTypes.func.isRequired,
  handleWidgetMenuShow:PropTypes.func.isRequired
}

export default WidgetMenuFontHot
